<template>
    <div class="regVerification">
         <!-- logo和背景图片区域 -->
         <Logo></Logo>
         <van-form @submit="onSubmit">
            <van-cell-group inset>
                
                 <!-- 手机号码输入框 -->
                <img class="icon_phone" src="@/assets/img/icon_phone.png" alt="">
                <van-field
                  v-model="VeriCode"
                  name="code"
                  center
                  clearable
                  placeholder="请输入四位验证码"
                  :rules="[{ validator: validatorVeriCode }]"
                >
                  <template #button>
                    <van-button size="small" type="primary" color="#FF8094" v-if="butShow" @click="sendVeriCode" >重新发送</van-button>
                    <van-button size="small" type="primary" color="#FF8094" v-if="!butShow" disabled>{{count}}</van-button>
                  </template>
                </van-field>
            </van-cell-group>
            <!-- 完成按钮 -->
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                完成
                </van-button>
            </div>
            <!-- 语音验证码 -->
            <div class="tip">
                收不到验证码?试试语音验证码
            </div>           
        </van-form>
    </div>
</template>

<script setup>
    // 引入组件
    import Logo from './loginComponents/logo.vue'

    import useLoginStore from '@/store/login'
    import { ref,reactive,onMounted } from 'vue';
    import { sendRegCode,postRegiester } from '@/api'
    import { useRoute,useRouter } from 'vue-router';
    import { showDialog,showSuccessToast } from 'vant';
    const router = useRouter()
    const route = useRoute()
    const LoginStore = useLoginStore()
    //VeriCode存放验证码
    const VeriCode = ref('');
      //定义show判断发送验证码按钮是否倒计时
      const butShow = ref(true)
    //定义倒计时
    let count = ref(60)
    //用于存计时器返回值
    let timer = null

    
    let register = reactive({
      code : null,
      username : null,
      mobile : null,
      password : null,
    })
    //组件挂载完成时运行
    onMounted(()=>{
      register = route.params;
      sendVeriCode();
      // console.log(route.params)
    })
    
    //校验验证码
    const validatorVeriCode = (val) => {
      if(!val){
        return '验证码不能为空'
      }else if(!LoginStore.reg_veriCode.test(val)){
        return `${val} 不合规,请重新输入4位数字`;
      }
    }
      //发送验证码
      const sendVeriCode = async() => {
      //发送请求验证码
      console.log('发送请求验证码')
      //调整按钮样式，倒计时
      const TIME_COUNT = 60;
      if(!timer){
        count.value = TIME_COUNT;
        butShow.value = false;
        timer = setInterval(()=>{
          if(count.value>0 && count.value <= TIME_COUNT){
            count.value -- ;
          }else{
            butShow.value = true;
            clearInterval(timer);
            timer = null
          }
        },1000)
      }
      //发送验证码请求
      const res = await sendRegCode({
        mobile:register.mobile,
      })
      register.code = res.user.code;

        // 模拟手机接收到短信
      setTimeout(()=>{
        showDialog({
        title: '验证码',
        message: `您的验证码是${register.code}`,
        })
      },4000)
    }

    // 提交 验证验证码是否正确，如果正确则完成注册
    const onSubmit = async(values) => {
      if(values.code === register.code){
        const res = await postRegiester(register);
        if(res.code == 200){
          showSuccessToast('注册成功');
          setTimeout(()=>{
            router.replace('/guide')
          },1000)
        }
      }else{
        showDialog({
        title: '验证码',
        message: `验证码错误`,
        })
      }
    };
</script>

<style scoped>
  .regVerification{
    display: flex;
    align-items: center;
    flex-direction: column;
    /* justify-content: space-between; */
  }
  :deep(.van-cell-group--inset){
   width: 337px;
   position: relative;
   margin-top: 50px;
  }
  :deep(.van-cell){
    border-bottom: 2px solid rgb(238, 238, 238);
    padding-bottom: 4px;
    line-height: 40px;
    position: relative;
  }
  /* 每个输入框的样式 */
  :deep(.van-field__control ){
    padding-top: 10px;
    height: 40px;
    padding-left: 50px;
    font-size: 18px;
  }
  /* 按钮样式 */
  :deep(.van-button--round){
    background-color:#FF8094 ;
    border: none;
    width: 300px;
    margin: auto;
    margin-top: 140px;
  }
  /* 错误信息样式 */
  :deep(.van-field__error-message){
    position:fixed;
    /* top: 40px;
    left:40px; */
    z-index: 200;
    left: 80px;
  }
  .icon_phone{
    width: 12px;
    z-index: 10;
    position: absolute;
    top: 24px;
    left: 8px;
  }
  .tip{
    height: 16px;
    text-align: center;
    line-height: 16px;
    font-size: 11px;
    color: rgb(102, 102, 102);
  }
</style>